<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<ui:composition>
	<h:panelGrid id="productPictureInputPanel" style="width:100%">
		<p:dataTable var="picture" value="#{productModel.current.pictures}"
			rows="20">
			<f:facet name="header">List of Pictures<p:commandButton
					oncomplete="pictureDlg.show()" ajax="true" update=":dialogForm,:headerForm"
					actionListener="#{pictureController.init}" icon="add" value="Add"
					title="Add picture" style="float:left"></p:commandButton>
			</f:facet>

			<p:column style="width:25px">
				<f:facet name="header">
					<f:facet name="header">
						<p:commandButton icon="delete" ajax="true" update=":detailForm"
							style="float:right"
							actionListener="#{productController.removeSelectedPicsFromCurrent}"></p:commandButton>
					</f:facet>
				</f:facet>
				<p:selectBooleanCheckbox value="#{picture.selected}"></p:selectBooleanCheckbox>
			</p:column>

			<p:column headerText="id" sortBy="#{picture.id}">
			<h:outputText value="#{picture.id}" />
			</p:column>
			<p:column headerText="Title" sortBy="#{picture.title}">
				
				<h:outputText value="#{picture.title}" />
			</p:column>

			<p:column headerText="File Name">
				<f:facet name="header">
						file name
					</f:facet>
				<h:outputText value="#{picture.fileName}" />
			</p:column>
			<p:column>
				<ui:remove>
					<p:lightBox>
						<h:outputLink value="../#{picture.fullFileName}">
							<h:graphicImage library="images"
								value="../#{picture.fullFileName}"
								style="width:25px;height:25px"></h:graphicImage>
						</h:outputLink>
					</p:lightBox>
				</ui:remove>
				<h:graphicImage id ="productImg" library="images" value="../#{picture.fullFileName}"
					style="width:25px;height:25px"></h:graphicImage>
				<p:overlayPanel id="imgPanel" for="productImg" showEffect="blind"
					hideEffect="explode" showEvent="mouseover" hideEvent="mouseout">				
							<p:graphicImage value="../#{picture.fullFileName}" width="320" />						
				</p:overlayPanel>
			</p:column>
		</p:dataTable>

		<p:dialog header="Choose pictures" widgetVar="pictureDlg"
			resizable="false" id="pictureDlg" showEffect="fade"
			hideEffect="explode" modal="false" style="width:900px;height:600px"
			rendered="#{pictureModel.isInitialized}">
			<ui:include src="/components/admin/picture/listWithCheckbox.xhtml"></ui:include>
			<p:commandButton value="OK"
				actionListener="#{productController.addSelectedPicsToCurrent}"
				ajax="true" oncomplete="pictureDlg.hide()" update=":detailForm,:headerForm"
				style="float:left" />
			<p:commandButton value="Cancel" ajax="true"
				onclick="pictureDlg.hide()" style="float:right" />
		</p:dialog>
	</h:panelGrid>
</ui:composition>

</html>